<template>
	<div>
		<div class="supportBox">
			<div class="serviceBox">
				<p class="serviceTitle">专业服务支持</p>
				<ul class="serviceList">
					<li class="list1">
						<img src="../../assets/support/tab1.png">
						<span class="blueColor">服务推荐</span>
					</li>
					<li class="list2">
						<img class="grey" src="../../assets/support/tab2.png">
						<span>迁云&云上应用优化</span>
					</li>
					<li class="list3">
						<img class="grey" src="../../assets/support/tab3.png">
						<span>系统保障&运维</span>
					</li>
					<li class="list4">
						<img class="grey" src="../../assets/support/tab4.png">
						<span>专家护航</span>
					</li>
				</ul>
				<div class="serviceCon serviceCon1 clearfix">
					<div class="serviceTxt">
						<p class="serviceName">云上系统专家保障</p>
						<p class="serviceDetail">用户业务推广、广告营销、版本更新、线上大促活动等系统压力爆发增长期间，向用户提供系统容量体检及管理方案建议、系统优化建议、容灾方案建议等全程的应急保障技术支持（护航）和应急响应机制的服务，协助客户保障云上业务稳定。</p>
					</div>
					<img src="../../assets/support/tabA.png">
				</div>
				<div class="serviceCon serviceCon2 clearfix" style="display: none;">
					<div class="serviceTxt">
						<p class="serviceName">上云方案实施</p>
						<p class="serviceDetail">PAAS云认证区域服务提供商派遣工程师前往用户公司，帮助用户对云环境做统一的规划和部署，包括云产品的开通、应用服务搭建、数据迁移和安全策略制定等，让用户的上云方案实施过程更加轻松、放心。</p>
					</div>
					<img src="../../assets/support/tabB.png">
				</div>
				<div class="serviceCon serviceCon3 clearfix" style="display: none;">
					<div class="serviceTxt">
						<p class="serviceName">7x24小时应用保障</p>
						<p class="serviceDetail">PAAS云认证区域服务提供商，帮助用户对云上业务进行7*24小时的监控、故障响应、系统优化、应用升级、数据库DBA服务和安全防护，旨在协助用户完成运维工作，让用户能更加专注于自身业务。</p>
					</div>
					<img src="../../assets/support/tabC.png">
				</div>
				<div class="serviceCon serviceCon4 clearfix" style="display: none;">
					<div class="serviceTxt">
						<p class="serviceName">云上系统专家保障</p>
						<p class="serviceDetail">用户业务推广、广告营销、版本更新、线上大促活动等系统压力爆发增长期间，向用户提供系统容量体检及管理方案建议、系统优化建议、容灾方案建议等全程的应急保障技术支持（护航）和应急响应机制的服务，协助客户保障云上业务稳定。</p>
					</div>
					<img src="../../assets/support/tabD.png">
				</div>
			</div>
			<div class="selfHelp">
				<p class="helpTitle">智能与自助服务</p>
				<ul class="clearfix">
					<li>
						<img src="../../assets/support/selfHelp1.png">
						<p class="title">云博士(智能机器人)</p>
						<p class="txt">秒级响应、多端触达的智能服务</p>
					</li>
					<li>
						<img src="../../assets/support/selfHelp2.png">
						<p class="title">云享(专家分享)</p>
						<p class="txt">多年云计算服务经验和技术分享</p>
					</li>
					<li>
						<img src="../../assets/support/selfHelp3.png">
						<p class="title">文档与视频</p>
						<p class="txt">丰富的产品介绍文档和视频</p>
					</li>
				</ul>
			</div>
			<div class="customer">
				<p class="customerTitle">客户声音</p>
				<ul class="customerCon clearfix">
					<li>
						<div class="wrap1">
							<img src="../../assets/support/customer1.jpg">
							<p>
								<span>行 &nbsp; &nbsp; &nbsp; 业：</span>
								<span>家居</span>
							</p>
							<p>
								<span>服务类型：</span>
								<span>区域服务</span>
							</p>
							<p>
								<span>使用服务：</span>
								<span>故障排查</span>
							</p>
						</div>
						<div class="wrap2">
							<h6>客户说：</h6>
							<p>业务高速发展的同时也受到网站攻击问题的困扰，PAAS云生态服务合作伙伴及时帮我们清除了安全隐患，不仅对网站源码做了防护，而且加固了服务器和应用，解决了网站发展的后顾之忧，保护了罗浮宫的品牌形象和美誉度，为PAAS云生态服务点赞！</p>
						</div>
					</li>
					<li>
						<div class="wrap1">
							<img src="../../assets/support/customer2.jpg">
							<p>
								<span>行 &nbsp; &nbsp; &nbsp; 业：</span>
								<span>人工智能</span>
							</p>
							<p>
								<span>服务类型：</span>
								<span>区域服务</span>
							</p>
							<p>
								<span>使用服务：</span>
								<span>7x24小时应用保障</span>
							</p>
						</div>
						<div class="wrap2">
							<h6>客户说：</h6>
							<p>将云上系统的维护和支持交由区域服务商来完成，使得我们自己的技术团队可以专注于产品和业务，同时区域服务商也非常人性化的讲解技术实现的操作方法，大大减轻了我们业务上的技术运维复杂度。不仅思虑于先，更着眼于未来，整体体验非常满意。</p>
						</div>
					</li>
					<li>
						<div class="wrap1">
							<img src="../../assets/support/customer3.jpg">
							<p>
								<span>行 &nbsp; &nbsp; &nbsp; 业：</span>
								<span>医疗健康</span>
							</p>
							<p>
								<span>服务类型：</span>
								<span>专家服务</span>
							</p>
							<p>
								<span>使用服务：</span>
								<span>云上系统专家保障</span>
							</p>
						</div>
						<div class="wrap2">
							<h6>客户说：</h6>
							<p>目睹直播上云以来，PAAS云帮助我们梳理了高并发情况下的直播架构，保障了我们的众多大型直播活动，协助了我们出海战略布局。PAAS云用稳定的质量和用心的服务支撑了我们飞速的发展。 目睹直播今后也将和PAAS云一起，用心构建稳定的企业服务！</p>
						</div>
					</li>
					<li>
						<div class="wrap1">
							<img src="../../assets/support/customer4.jpg">
							<p>
								<span>行 &nbsp; &nbsp; &nbsp; 业：</span>
								<span>金融</span>
							</p>
							<p>
								<span>服务类型：</span>
								<span>企业服务</span>
							</p>
							<p>
								<span>使用服务：</span>
								<span>企业尊享级服务</span>
							</p>
						</div>
						<div class="wrap2">
							<h6>客户说：</h6>
							<p>The PAAS Cloud After Sales Support team are highly reliable at responding to our inquiries via email or telephone, as well as professional manner and highly knowledgeable.</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>   
</template>

<script>
export default {
  data() {
    return {
      
    };
  },
  methods: {
    
  },
  mounted:function(){
  	/*列表切换*/
  	$(".serviceList>li").click(function(){
  		$(".serviceList>li").children("img").addClass("grey");
  		$(".serviceList>li").children("span").removeClass("blueColor");
  		$(this).children("img").removeClass("grey");
  		$(this).children("span").addClass("blueColor");
  	});
  	$(".list1").click(function(){
  		$(".serviceCon").hide();
  		$(".serviceCon1").show();
  	});
  	$(".list2").click(function(){
  		$(".serviceCon").hide();
  		$(".serviceCon2").show();
  	});
  	$(".list3").click(function(){
  		$(".serviceCon").hide();
  		$(".serviceCon3").show();
  	});
  	$(".list4").click(function(){
  		$(".serviceCon").hide();
  		$(".serviceCon4").show();
  	});
  	/*列表切换ending */
  	/*上移效果*/
  	$(".wrap1").mouseover(function(){
  		$(".wrap2").removeClass("animate");
  		$(this).siblings(".wrap2").addClass("animate");
  	});
  	$(".wrap2").mouseleave(function(){
  		$(".wrap2").removeClass("animate");
  		$(this).removeClass("animate");
  	});
  	/*上移效果ending*/
  }
}
</script>

<style scoped>
.supportBox{
	width:1200px;
	margin:0 auto;
}
.serviceBox .serviceTitle{
	height: 44px;
    line-height: 44px;
    font-size: 30px;
    color: #373d41;
    text-align: center;
    font-weight: 400;
    margin-top: 52px;
}
.serviceBox .serviceList{
	width: 100%;
    height: 46px;
    font-size: 0;
    text-align: center;
    border-bottom: 1px solid #dfdfdf;
    margin-top: 22px;
}
.serviceBox .serviceList li{
	display: inline-block;
    height: 46px;
    line-height: 46px;
    font-size: 16px;
    color: #373d41;
    text-align: center;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    margin: 0 35px;
    overflow: hidden;
    transition: all .3s ease-in-out;
}
.serviceList li>img.grey{
	-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}
.blueColor{
	color:#00c1e0;
}
.serviceList li>img{
    position: relative;
    top: 6px;
    transition: all .3s ease-in-out;
}
.serviceCon {
	padding: 40px;
}
.serviceCon .serviceTxt{
	float:left;
	width: 490px;
}
.serviceTxt .serviceName{
	height: 30px;
    line-height: 30px;
    font-size: 20px;
    color: #00c1e0;
    font-weight: 400;
}
.serviceTxt .serviceDetail{
	width: 465px;
    line-height: 28px;
    font-size: 14px;
    color: #373d41;
    margin-top: 16px;
}
.serviceCon{
	height:240px;
}
.serviceCon>img{
	float: right;
}
.selfHelp .helpTitle,.customer .customerTitle{
	height: 44px;
    line-height: 44px;
    font-size: 30px;
    color: #373d41;
    text-align: center;
    font-weight: 400;
    padding-top: 60px;
}
.selfHelp{
	width:100%;
	background-color: #fafbff;
}
.selfHelp ul{
	width: 100%;
    margin-top: 34px;
    margin-bottom: 26px;
}
.selfHelp ul li{
	float: left;
    display: inline-block;
    width: 370px;
    height: 244px;
    background-color: #fff;
    box-shadow: 0 25px 35px rgba(165,165,189,.3);
    margin-left: 22px;
    margin-bottom: 40px;
    transition: all .4s linear;
}
.selfHelp ul li:hover{
	transform: scale(1.1);
    transition: all .4s linear;
	-webkit-transform: scale(1.1);
	-webkit-transition: all .4s linear;
}
.selfHelp ul li img{
	display: block;
    width: 54px;
    height: 54px;
    margin: 28px auto 0;
}
.selfHelp ul li .title{
	height: 30px;
    line-height: 30px;
    font-size: 20px;
    color: #00c1e0;
    text-align: center;
    margin-top: 14px;
}
.selfHelp ul li .txt{
	height: 24px;
    line-height: 24px;
    font-size: 16px;
    color: #73777a;
    text-align: center;
    margin-top: 8px;
}
.customerCon{
	display: block;
    width: 100%;
    margin-top: 22px;
    margin-bottom: 50px;
}
.customerCon li{
	position: relative;
    z-index: 0;
    float: left;
    display: inline-block;
    width: 300px;
    height: 358px;
    margin-left: -1px;
    overflow: hidden;
}
.customerCon .wrap1{
	height: 350px;
    padding: 0 25px;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    margin: 3px 0;
    overflow: hidden;
    transition: margin .5s ease-in-out;
}
.customerCon .wrap2{
	width: 242px;
    height: 356px;
    padding: 0 25px;
    background: url("../../assets/support/customerBg.jpg") no-repeat bottom;
    border: 1px solid #fff;
    margin: 0 auto;
    overflow: hidden;
    transition: all .4s linear;
}
.wrap1>img{
	display: block;
    height: 42px;
    vertical-align: top;
    margin: 56px 0 35px;
}
.wrap1 p {
    font-family: Microsoft Yahei;
    height: 40px;
    line-height: 20px;
    font-size: 16px;
    color: #373d41;
    margin-bottom: 6px;
    overflow: hidden;
}
.customerCon .wrap2 h6{
	height: 30px;
    line-height: 30px;
    font-size: 18px;
    color: #fff;
    font-weight: 400;
    letter-spacing: 1px;
    margin-top: 48px;
}
.customerCon .wrap2 p{
    height: 240px;
    line-height: 30px;
    font-size: 14px;
    color: #fff;
    letter-spacing: 1px;
    margin-top: 10px;
    overflow: hidden;
}
.animate{
	transform:translateY(-355px);
	transition: all .4s linear;
}
 
</style>
